<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>动态勾选多选框效果</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .label62 {
            position: relative;
        }

        .check-inp62 {
            width: 20px;
            height: 20px;
            border: 2px solid #000000;
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            appearance: none;
            /* none时可以自定义其外观 */
        }

        .check-inp62:after {
            content: '';
            width: 12px;
            height: 12px;
            background-color: #0093E9;
            border-radius: 3px;
            position: absolute;
            top: 2px;
            left: 2px;
            transform: scale(0);
            transition: all 0.2s ease-in-out;
        }

        .check-inp62:checked:after {
            transform: scale(1);
        }

        .check-inp62:hover,
        .check-inp62:checked {
            border-color: #0093E9;
        }
    </style>
</head>

<body>
    <div class="app">
        <label class="label62">
            <input type="checkbox" class="check-inp62">
        </label>
    </div>
</body>

</html>